<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Dojo Button Widget Test</title>

		<style type="text/css">
			@import "../../../dojo/resources/dojo.css";
			@import "../css/dijitTests.css";

			/* group multiple buttons in a row */
			.box {
				display: block;
				text-align: center;
			}
			.box .dijit {
				margin-right: 10px;
			}
		</style>

		<!-- required: the default dijit theme: -->
		<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css">

		<!-- required: dojo.js -->
		<script type="text/javascript" src="../../../dojo/dojo.js"
			djConfig="isDebug: true, parseOnLoad: true"></script>

		<!-- only needed for alternate theme testing: -->
		<script type="text/javascript" src="../_testCommon.js"></script>

		<script type="text/javascript">
			dojo.require("dijit.dijit"); // optimize: load dijit layer
			dojo.require("dijit.ColorPalette");
			dojo.require("dijit.Menu");
			dojo.require("dijit.Tooltip");
			dojo.require("dijit.form.Button");
			dojo.require("dijit.form.Form");
			dojo.require("dijit.form.TextBox");
			dojo.require("dojo.parser");
		</script>
	</head>
<body class="claro">
	<h1 class="testTitle">Dijit Button Test</h1>
	<h2>Simple, drop down &amp; combo buttons</h2>
	<p>
	Buttons can do an action, display a menu, or both:
	</p>
	<p class="box">
		<button id="button" onclick="console.log('clicked native button');">&lt;button&gt;</button>
		<input id="input" type="button" value="&lt;input type='button'&gt;" onclick="console.log('clicked native input button');">
		<button id="1465" dojoType="dijit.form.Button" onClick='console.log("clicked simple");' iconClass="plusIcon" value="Create">
			Create
		</button>
		<span dojoType="dijit.Tooltip" connectId="1465">tooltip on button</span>
		<button id="1467" dojoType="dijit.form.Button" title="view title" onClick='console.log("clicked simple")'>
			View
		</button>
		<span dojoType="dijit.Tooltip" connectId="1466">tooltip on button</span>
		<button dojoType="dijit.form.ComboButton" id="comboCreate" optionsTitle='save options' onClick='console.log("clicked combo save")'
				iconClass="plusIcon" title="creative title">
			<span>Create</span>
			<div dojoType="dijit.Menu" id="createMenu" style="display: none;">
				<div dojoType="dijit.MenuItem"  iconClass="dijitEditorIcon dijitEditorIconSave"
					onClick="console.log('not actually saving anything, just a test!')">Create blank</div>
				<div dojoType="dijit.MenuItem"
					onClick="console.log('not actually saving anything, just a test!')">Create from template</div>
			</div>
		</button>
		<button dojoType="dijit.form.DropDownButton" id="edit" iconClass="noteIcon" title="edit title" value="Edit">
			<span>Edit<b>!</b></span>
			<div dojoType="dijit.Menu" id="editMenu">
				<div dojoType="dijit.MenuItem" id="cut" iconClass="dijitEditorIcon dijitEditorIconCut"
					onClick="console.log('not actually cutting anything, just a test!')">Cut</div>
				<div dojoType="dijit.MenuItem" id="copy" iconClass="dijitEditorIcon dijitEditorIconCopy"
					onClick="console.log('not actually copying anything, just a test!')">Copy</div>
				<div dojoType="dijit.MenuItem" id="paste" iconClass="dijitEditorIcon dijitEditorIconPaste"
					onClick="console.log('not actually pasting anything, just a test!')">Paste</div>
				<div dojoType="dijit.MenuSeparator"></div>
				<div dojoType="dijit.PopupMenuItem">
					<span>Submenu</span>
					<div dojoType="dijit.Menu" id="submenu2">
						<div dojoType="dijit.MenuItem" onClick="console.log('Submenu 1!')">Submenu Item One</div>
						<div dojoType="dijit.MenuItem" onClick="console.log('Submenu 2!')">Submenu Item Two</div>
						<div dojoType="dijit.PopupMenuItem">
							<span>Deeper Submenu</span>
							<div dojoType="dijit.Menu" id="submenu4">
								<div dojoType="dijit.MenuItem" onClick="console.log('Sub-submenu 1!')">Sub-sub-menu Item One</div>
								<div dojoType="dijit.MenuItem" onClick="console.log('Sub-submenu 2!')">Sub-sub-menu Item Two</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</button>
		<button dojoType="dijit.form.DropDownButton" id="color" iconClass="noteIcon" value="color">
			<span>Color</span>
			<div dojoType="dijit.ColorPalette" id="colorPalette" style="display: none" palette="3x4"
				onChange="console.log(this.value);"></div>
		</button>
		<button dojoType="dijit.form.ComboButton" id="save" optionsTitle='save options' onClick='console.log("clicked combo save")'
				iconClass="plusBlockIcon">
			<span>Save</span>
			<div dojoType="dijit.Menu" id="saveMenu" style="display: none;">
				<div dojoType="dijit.MenuItem" id="saveMenuItem" iconClass="dijitEditorIcon dijitEditorIconSave"
					onClick="console.log('not actually saving anything, just a test!')">Save</div>
				<div dojoType="dijit.MenuItem" id="saveAs"
					onClick="console.log('not actually saving anything, just a test!')">Save As</div>
			</div>
		</button>
		<button dojoType="dijit.form.Button" id="disabled" onClick='console.log("clicked simple")' disabled='true' iconClass="plusIcon">
			Disabled
		</button>
	</p>
	<br clear="all">
	<h2>DropDownButtons with different drop down positions</h2>
	<button dojoType="dijit.form.DropDownButton" id="dropdown_default" iconClass="noteIcon" value="color">
		<span>Default (below)</span>
		<div dojoType="dijit.ColorPalette" style="display: none" palette="3x4"
			onChange="console.log(this.value);"></div>
	</button>
	<button dojoType="dijit.form.DropDownButton" id="dropdown_up" dropDownPosition="above" iconClass="noteIcon" value="color">
		<span>Above</span>
		<div dojoType="dijit.ColorPalette" style="display: none" palette="3x4"
			onChange="console.log(this.value);"></div>
	</button>
	<button dojoType="dijit.form.DropDownButton" id="dropdown_before" dropDownPosition="before" iconClass="noteIcon" value="color">
		<span>Before</span>
		<div dojoType="dijit.ColorPalette" style="display: none" palette="3x4"
			onChange="console.log(this.value);"></div>
	</button>
	<button dojoType="dijit.form.DropDownButton" id="dropdown_after" dropDownPosition="after" iconClass="noteIcon" value="color">
		<span>After</span>
		<div dojoType="dijit.ColorPalette" style="display: none" palette="3x4"
			onChange="console.log(this.value);"></div>
	</button>
	<h2>ComboButtons with different drop down positions</h2>
	<button dojoType="dijit.form.ComboButton" id="combo_default" optionsTitle='save options' onClick='console.log("clicked combo save")'
			iconClass="plusBlockIcon">
		<span>Default (below)</span>
		<div dojoType="dijit.Menu" tyle="display: none;">
			<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconSave"
				onClick="console.log('not actually saving anything, just a test!')">Save</div>
			<div dojoType="dijit.MenuItem"
				onClick="console.log('not actually saving anything, just a test!')">Save As</div>
		</div>
	</button>
	<button dojoType="dijit.form.ComboButton" id="combo_above" dropDownPosition="above" optionsTitle='save options' onClick='console.log("clicked combo save")'
			iconClass="plusBlockIcon">
		<span>Up</span>
		<div dojoType="dijit.Menu" style="display: none;">
			<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconSave"
				onClick="console.log('not actually saving anything, just a test!')">Save</div>
			<div dojoType="dijit.MenuItem"
				onClick="console.log('not actually saving anything, just a test!')">Save As</div>
		</div>
	</button>
	<button dojoType="dijit.form.ComboButton" id="combo_before" dropDownPosition="before" optionsTitle='save options' onClick='console.log("clicked combo save")'
			iconClass="plusBlockIcon">
		<span>Before</span>
		<div dojoType="dijit.Menu" style="display: none;">
			<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconSave"
				onClick="console.log('not actually saving anything, just a test!')">Save</div>
			<div dojoType="dijit.MenuItem"
				onClick="console.log('not actually saving anything, just a test!')">Save As</div>
		</div>
	</button>
	<button dojoType="dijit.form.ComboButton" id="combo_after" dropDownPosition="after" optionsTitle='save options' onClick='console.log("clicked combo save")'
			iconClass="plusBlockIcon">
		<span>After</span>
		<div dojoType="dijit.Menu" style="display: none;">
			<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconSave"
				onClick="console.log('not actually saving anything, just a test!')">Save</div>
			<div dojoType="dijit.MenuItem"
				onClick="console.log('not actually saving anything, just a test!')">Save As</div>
		</div>
	</button>
	<h2>Buttons with no text label</h2>
	<p>Buttons have showLabel=false so text is not displayed.  If no title attribute supplied, Should have label as title attribute displayed on mouse over</p>
	<div class="box">
		<button id="1466" dojoType="dijit.form.Button" title="title attrib rather than label" onClick='console.log("clicked simple button with no text label")'
		iconClass="plusIcon" showLabel="false">
		<span><b>Rich</b><i> Text</i> Test!</span>
		</button>
				<div dojoType="dijit.form.DropDownButton" iconClass="noteIcon" showLabel="false" title="color title">
			<span>Color</span>
			<div dojoType="dijit.ColorPalette" id="colorPalette2" style="display: none" palette="3x4"
				onChange="console.log(this.value);">
			</div>
	</div>
	<div dojoType="dijit.form.ComboButton" optionsTitle='save options' title="save title" onClick='console.log("clicked combo save")'
				iconClass="plusBlockIcon" showLabel="false">
			<span>Save</span>
			<div dojoType="dijit.Menu" id="saveMenu2" style="display: none;">
				<div dojoType="dijit.MenuItem"  iconClass="dijitEditorIcon dijitEditorIconSave"
					onClick="console.log('not actually saving anything, just a test!')">Save</div>
				<div dojoType="dijit.MenuItem"
					onClick="console.log('not actually saving anything, just a test!')">Save As</div>
			</div>
		</div>
	</div>
	<br clear="all">
	<h2>Toggle buttons</h2>
	<p>The button CSS as well as the icon CSS can change on toggle </p>
	<div class="box">
		<button dojoType="dijit.form.ToggleButton" id="toggle1" checked onChange="console.log('toggled button checked='+arguments[0]);this.set('label',arguments[0] ==
		true ? 'toggle me off' : 'toggle me on');" iconClass="dijitCheckBoxIcon">
			Toggle me off
		</button>
		<button dojoType="dijit.form.ToggleButton" id="toggle2" onChange="console.log('toggled button checked='+arguments[0]);" iconClass="dijitRadioIcon">
			Toggle me
		</button>
	</div>
	<br clear="all">
	<h2>Sizing</h2>
	<p>Short button, tall buttons, big buttons, small buttons...
	These buttons size to their content (just like &lt;button&gt;).</p>
	<div class="box">
		<button dojoType="dijit.form.Button" onclick='console.log("big");' iconClass="flatScreenIcon">
			<span style="font-size:xx-large">big</span>
		</button>
		<button id="smallButton1" dojoType="dijit.form.Button" onclick='console.log("small");'>
			<img src="../images/arrowSmall.gif" width="15" height="5">
			<span style="font-size:x-small">small</span>
		</button>
		<button dojoType="dijit.form.Button" onclick='console.log("long");'>
			<img src="../images/tube.gif" width="150" height="16">
			long
		</button>
		<button dojoType="dijit.form.Button" onclick='console.log("tall");' width2height="0.1">
			<img src="../images/tubeTall.gif" height="75" width="35"><br>
			<span style="font-size:medium">tall</span>
		</button>
		<div style="clear: both;"></div>
	</div>
	<br clear="all">
	<h2>Customized buttons</h2>
	<p>Dojo users can customize styles.  Here's an example:</p>
	<style type="text/css">
		.acmeButton .dijitButtonNode {
			background: rgb(96,96,96) !important;
			color: white !important;
			padding: 10px !important;
			font-size: x-large !important;
			padding-top: 10px !important;
			padding-bottom: 10px !important;
			border: 2px inset rgb(96,96,96);
		}
		.acmeButtonHover .dijitButtonNode {
			background-color: rgb(89,94,111) !important;
			color: cyan !important;
		}
		.acmeButtonFocused .dijitButtonNode {
			border: yellow inset 2px;
		}
		.acmeButtonActive .dijitButtonNode {
			background-color: white !important;
			color: black !important;
			border: 2px solid black !important;
		}
	</style>
	<div class="box">
		<button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("short");'>
			short
		</button>
		<button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("longer");'>
			bit longer
		</button>
		<button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("longer yet");'>
			ridiculously long
		</button>
		<div style="clear: both;"></div>
	</div>
		<h2>Toggling the display test</h2>
	<p>
	(Ticket <a href="http://trac.dojotoolkit.org/ticket/403">#403</a>)
	</p>
	<div class="box">
		<button dojoType="dijit.form.Button" onclick='dojo.byId("hiddenNode").style.display="inline";'>
			Show Hidden Buttons
		</button>
	</div>
	<div class="box" style="display:none;" id="hiddenNode">
		<button dojoType="dijit.form.Button" onclick='console.log("clicked simple")' iconClass="plusIcon">
			Create
		</button>
		<button dojoType="dijit.form.Button" onclick='console.log("clicked simple")' iconClass="plusIcon">
			Create
		</button>
	</div>
	<div style="clear: both;"></div>
	<h2>Programatically changing buttons</h2>
	<p>clicking the buttons below will change the buttons above</p>
	<script type="text/javascript">
		// FIXME: doesn't the manager have a function for filtering by type?
		function forEachButton(func){
			dijit.registry.filter(function(widget){ return widget instanceof dijit.form.Button; }).forEach(func);
		}
		var disabled = false;
		function toggleDisabled(){
			disabled =! disabled;
			forEachButton(function(widget){ widget.set('disabled',disabled); });
			dojo.byId("toggle").innerHTML= disabled ? "Enable all" : "Disable all";
		}
		var labels=["<img src='../images/note.gif' width='20' height='20'>All", "<i>work</i>", "and no", "<span style='font-size: 40pt;'>play</span>",
					 "<span style='color: red'>makes</span>", "Jack", "<span style='font-size: 20pt;'>a</a>", "dull",
					 "<img src='../images/plus.gif' width='16' height='16'>boy"];
		var idx = 0;
		function changeLabels(){
			forEachButton(function(widget){
				widget.set('label', labels[idx++ % labels.length]);
			});
		}
		function getLabels(){
			forEachButton(function(widget){
				console.log(widget.get('label'));
			});
		}
	</script>
	<div>
		<button id="toggle" onclick='toggleDisabled()'>Disable all</button>
		<button id="changeLabels" onclick='changeLabels()'>Change labels</button>
		<button onclick='getLabels()'>Get labels</button>
		<button onclick='location.reload()'>Revert</button>
	</div>
	<h3>Button instantiated via javacript:</h3>
	<p id="buttonContainer" style="display: none;"></p>
	<script type="text/javascript">
		// See if we can make a button in script and attach it to the DOM ourselves.
		dojo.addOnLoad(function(){
			var widget = new dijit.form.Button({
				label: "hello!",
				name: "programmatic"
			});
			widget.placeAt("buttonContainer");	// place in page

			var widget2 = new dijit.form.Button({
				label: "hello!",
				name: "programmatic"
			});
			widget2.set("label", "i'm programmatic too");	// change label (for testing)
			widget2.placeAt("buttonContainer");	// place in page
		});
	</script>
    <h3>DropDownButton instantiated via javacript:</h3>
	<div id="dropdownButtonContainer"></div>
	<script type="text/javascript">
	    // See if we can make a drop down button in script and attach it to the DOM ourselves.
        function createButton(){
            var menu = new dijit.Menu({ });
            menu.domNode.style.display="none";
            var menuItem1 = new dijit.MenuItem({
                label: "Save",
                iconClass:"dijitEditorIcon dijitEditorIconSave",
                onClick: function(){ alert('save'); }
            });
            menu.addChild(menuItem1);

            var menuItem2 = new dijit.MenuItem({
                label: "Cut",
                iconClass:"dijitEditorIcon dijitEditorIconCut",
                onClick: function(){ alert('cut'); }
            });
            menu.addChild(menuItem2);

            var params = {
                label: "hello!",
                name: "programmatic2",
                dropDown: menu,
                id: "progButton"
            };
            var widget = new dijit.form.DropDownButton(params);
            dojo.byId("dropdownButtonContainer").appendChild(widget.domNode);
            dojo.byId("createButton").disabled = true;
            dojo.byId("destroyButton").disabled = false;
	    }
        function destroyButton(){
            var button = dijit.byId("progButton");
            button.destroyRecursive();
            dojo.byId("createButton").disabled = false;
            dojo.byId("destroyButton").disabled = true;
        }
    </script>
    <button id="createButton" onclick="createButton();">create dropdown button</button>
    <button id="destroyButton" onclick="destroyButton();">destroy dropdown button</button>

	<h3>Submit and Reset Buttons</h3>
	<div>Testing that submit and reset buttons work properly.  OnSubmit and OnReset handlers
		for the form just output to the console.
	</div>
	<form dojoType="dijit.form.Form" id="testForm" name="testForm"
		encType="multipart/form-data" action="../formAction.html" method="" >
		<script type="dojo/method" event="onReset">
			console.log("testForm onReset invoked");
		</script>
		<script type="dojo/method" event="onSubmit">
			console.log("testForm onSubmit invoked - not really submitting");
			return false;
		</script>
		<label for="testName">Name: </label><input dojoType="dijit.form.TextBox" id="testName" name="testName" value=""><br>
		<button dojoType="dijit.form.Button" type="submit" id="bSubmit">Submit</button>&nbsp;&nbsp;
		<button dojoType="dijit.form.Button" type="reset" id="bReset">Reset</button>
	</form>

	<h3>onClick Tests</h3>
	<div>Testing that onClick works properly
	</div>
	<form>
		<label for="onClickName">Value: </label><input id="onClickName" name="onClickName" value="RESET"><br>
		<button dojoType="dijit.form.Button" type="reset" id="reset1">Reset with no onClick handler should reset</button>
		<button type="reset" id="reset1N">Native Reset with no onClick handler should reset</button><br>
		<button dojoType="dijit.form.Button" type="reset" id="reset2" onClick="return false">Reset with "return false" onClick handler should not reset</button>
		<button type="reset" id="reset2N" onClick="return false">Native Reset with "return false" onClick handler should not reset</button><br>
		<button dojoType="dijit.form.Button" type="reset" id="reset3" onClick="return true">Reset with "return true" onClick handler should reset</button>
		<button type="reset" id="reset3N" onClick="return true">Native Reset with "return true" onClick handler should reset</button><br>
		<button dojoType="dijit.form.Button" type="reset" id="reset4" onClick="return">Reset with "return" onClick handler should reset</button>
		<button type="reset" id="reset4N" onClick="return">Native Reset with "return" onClick handler should reset</button><br>
		<button dojoType="dijit.form.Button" type="reset" id="reset5" onClick="">Reset with "" onClick handler should reset</button>
		<button type="reset" id="reset5N" onClick="">Native Reset with "" onClick handler should reset</button><br>
	</form>

	<h3>Submit/value test</h3>
	<script>
		submittedValues = function(values){
			for(var i in values){
				document.getElementById('buttonName').value = i;
				document.getElementById('buttonValue').value = values[i];
			}
		};
	</script>
	<form dojoType="dijit.form.Form" id="myForm"
		encType="multipart/form-data" action="../formAction.html" method="" target="_formSubmitIframe">
		<button id="Plain" name="Plain" type="submit" dojoType="dijit.form.Button" value="Plain Submit" label="Plain Submit"></button>
		<button id="Combo" name="Combo" type="submit" dojoType="dijit.form.ComboButton" value="Combo Submit" label="Combo Submit">
			<div dojoType="dijit.Menu" style="display:none;">
				<div id="ComboMenuItem" dojoType="dijit.MenuItem" onclick="dijit.byId('myForm').submit()">Combo MenuItem Submit</div>
			</div>
		</button>
		<button id="DropDown" name="DropDown" type="submit" dojoType="dijit.form.DropDownButton" value="DropDown Submit" label="DropDown Submit">
			<div dojoType="dijit.Menu" style="display:none;">
				<div id="DropDownMenuItem" dojoType="dijit.MenuItem" onclick="dijit.byId('myForm').submit()">DropDown MenuItem Submit</div>
			</div>
		</button>
		<button id="Disabled" name="Disabled" type="submit" dojoType="dijit.form.Button" disabled value="Disabled Submit" label="Disabled Submit"></button>
	</form>
	<br>
	<label for="buttonName">Submitted name:</label><input id="buttonName"><br>
	<nobr style="width:100%;"><label for="buttonValue">Submitted value:</label><input id="buttonValue" style="width:100%;overflow:hidden;"></nobr>
<iframe name="_formSubmitIframe" src="about:blank" onload="if(this.values)submittedValues(this.values)" style="display:none;"></iframe>

</body>
</html>
